<template>
  <div class="topic">
    <h2>最新</h2>
    <div class="ask-lists">
      <div
        class="ask-item"
        v-for='item in (lists.slice((currentPage-1)*pagesize,currentPage*pagesize))'
        v-bind:key="item.id"
      >
        <img
          :src="item.author_img"
          alt=""
        >
        <div class="ask-info">
          <p class="title">
            {{item.title}}

          </p>
          <p class="detail">
            {{item.detail}}
          </p>
          <p class="other">
            <span class="author">{{item.author}} 来自于 {{item.date}}</span>
            <span class="icon">
              <i class="el-icon-star-on"> {{item.star}}</i>
              <i class="el-icon-edit"> {{item.edit}}</i>
              <i class="el-icon-view"> {{item.view}}</i>
            </span>
          </p>
        </div>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 8,10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="lists.length"
      class="mypagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Topic',
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      lists: [
        {
          id: '002',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: '钟老师',
          author_img: 'https://img.php.cn/upload/avatar/000/000/001/7549e4e11eb66077f7da4d498c088a24.jpg',
          date: '2021-12-15 11:04:22',
          star: 4,
          edit: 129,
          view: 8808,
        },
        {
          id: '001',
          title: "混合支付",
          detail: "老师请问如果想要混合支付(余额+第三方支付)的话，应该怎么修改",
          author: '吴涛',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 199,
          view: 8890,
        },
        {
          id: '003',
          title: "xmind如何很好的使用思维导图",
          detail: "老师好请问xmind 如何像你─样使用起来那么溜呢?不会用啊",
          author: 'Mr.mai',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 0,
          edit: 99,
          view: 4508,
        },
        {
          id: '005',
          title: "代理问题",
          detail: "开发环境可以，但是发布到了生产环境就会出现Uncaught (in promise)Error: Reques",
          author: '赛',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 8,
          edit: 129,
          view: 4508,
        },
        {
          id: '004',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://img.php.cn/upload/avatar/000/482/127/605aeae773a7f324.jpeg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '006',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '007',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '008',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '009',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '010',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '011',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },
        {
          id: '012',
          title: "验证码",
          detail: "无论验证码输入什么，都会弹出'验证码错误'的对话框，即使不填也不会提示为空，依然显示°验证码错误",
          author: 'mark',
          author_img: 'https://www.php.cn/static/images/user_avatar.jpg',
          date: '2021-12-15 11:04:22',
          star: 9,
          edit: 129,
          view: 4508,
        },


      ]
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
  }
}
</script>

<style>
.topic {
  margin-top: 20px;
  width: 900px;
  overflow: hidden;
}
.topic > h2 {
  background: #fbfbfb;
  border-bottom: 1px solid #f0f0f0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  margin: 0;
  padding-left: 15px;
}

.ask-lists {
  padding: 20px;
  background: #fff;
}
.ask-lists .ask-item {
  min-height: 110px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.ask-item img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.ask-item .ask-info {
  float: right;
  margin-right: 20px;
  width: 770px;
}
.ask-info p {
  overflow: hidden;
  margin-bottom: 10px;
}
.ask-info .title {
  color: #5e5e5e;
  font-size: 18px;
}
.ask-info .detail {
  font-size: 14px;
  color: #999;
}
.other .author {
  font-size: 14px;
}
.other .icon {
  color: #aaa;
  float: right;
  /* height: 18px; */
  margin: 0px 15px 0 0;
  font-family: 'Microsoft YaHei';
  /* line-height: 18px; */
  font-size: 16px;
}
.icon i {
  margin-left: 8px;
}
</style>